<template>
    <div class="store-detail-technician mb15">
        <ul class="tab">
            <li>技师 <a class="fr" href="">全部技师 <i class="icon">></i></a></li>            
        </ul>
        <div class="personnel clearfix">
            <div class="box">
                <span class="item">
                    <img class="storepic" src="../../assets/images/storeheading.png" alt="" />
                    <em class="grade">4.2分</em>
                </span>    
                <span class="personname">张师傅</span>
                <span class="job">值班长</span>
            </div>

            <div class="box">
                <span class="item">
                    <img class="storepic" src="../../assets/images/storeheading.png" alt="" />
                    <em class="grade">4.2分</em>
                </span>    
                <span class="personname">张师傅</span>
                <span class="job">值班长</span>
            </div>
            <div class="box">
                <span class="item">
                    <img class="storepic" src="../../assets/images/storeheading.png" alt="" />
                    <em class="grade">4.2分</em>
                </span>    
                <span class="personname">张师傅</span>
                <span class="job">值班长</span>
            </div>
            <div class="box">
                <span class="item">
                    <img class="storepic" src="../../assets/images/storeheading.png" alt="" />
                    <em class="grade">4.2分</em>
                </span>    
                <span class="personname">张师傅</span>
                <span class="job">值班长</span>
            </div>

        </div>
    </div>
</template>

<style lang="scss" scoped>      
        @import "../../assets/css/_functions.scss";
        @import "../../assets/css/_variables.scss";
        .store-detail-technician{
            background: $_fff;
            ul.tab{
                border-bottom:1px solid $_dedede;
                flex-flow: row wrap;
            }
            li{
                font-size: rem(14);
                padding:rem(12) rem(15);
                a{
                    color: #b5b5b5;
                    font-size: rem(12);
                }
            }
            .personnel{
                padding:rem(28) 0 rem(10);
                display: flex;
                justify-content: space-around;
                .item{
                    display: flex;
                    flex-direction: column;
                    -webkit-box-pack: justify;
                    justify-content: space-between;
                    -webkit-box-align: start;
                    align-items: flex-start;

                    width: rem(64);
                    height: rem(64);
                    border-radius:rem(64);
                    text-align:center;
                    overflow:hidden;
                    position:relative;
                    margin-bottom:rem(5);
                    img{
                        width:100%;
                        height: rem(64);
                        border-radius:rem(64);  
                    }
                    em.grade{
                        display:inline-block;
                        background:#209fff;
                        width: 100%;
                        font-size: rem(11);
                        color: $_fff;
                        position: absolute;
                        bottom:rem(0);
                        left: 0;
                    }


                }
                .personname,.job{
                    display: block;
                    width: 100%;
                    text-align:center;
                    font-size: rem(14);
                    line-height: 1.5;
                }
                .job{
                    color:#b5b5b5;
                    font-size: rem(12);
                }

            }
        }
</style>